<template>
  <view class="tabsBottom">
    <view class="tabs2">
      <view :class="['tabs2Item', state.tabId === item.id ? 'tabs2ItemHover' : '']" v-for="(item,index) in orderStatus" :key="index" @click="changeTab2(item)">
        {{item?.label}}
      </view>
    </view>
    <!-- 待付款 -->
    <view class="list" v-if="state.tabId == 1">
      <view class="titles">
        <view class="text text01">名称</view>
        <view class="text text02">订单状态</view>
        <view class="text text03">价格</view>
        <view class="text text04">派单价</view>
        <view class="text text05">需结款</view>
        <view class="text text06">已结款</view>
      </view>
      <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
        <view :class="['item', item.status == 1 ? 'itemBlue': '', (item.status == 8 || item.status == 9)  ? 'itemYellow': '']" v-for="(item,index) in unPayInfo?.list" :key="index">
          <view class="text text01">
            <view class="span">{{item?.order_no}}</view>
            <view class="span02">{{item?.name || '--'}}</view>
          </view>
          <view class="text text02" style="color: rgba(0, 255, 13, 1)" v-if="item.order_status == 2">初稿</view>
          <view class="text text02" style="color: rgba(43, 90, 207, 1)" v-else-if="item.order_status == 1">定金</view>
          <view class="text text02" style="color: rgba(250, 177, 76, 1)" v-else-if="item.order_status == 3">定稿</view>
          <view class="text text03">{{item?.order_price}}</view>
          <view class="text text04">{{item?.send_price}}</view>
          <view class="text text05">{{item?.price}}</view>
          <view class="text text06">{{item?.yet_send_price}}</view>
        </view>    
      </scroll-view>
      <view class="priceMain">
        <view class="btn btnHover" v-if="unPayInfo?.status == 1" @click="jieKuanBtn">结款</view>
        <view class="btn" v-else>待确认</view>
        <view class="prices">
          <view class="priceItem">
            <text>需结款</text>
            <text class="text">{{unPayInfo?.total_price  || 0}}</text>
          </view>
          <view class="priceItem">
            <text>已结款</text>
            <text class="text">{{unPayInfo?.total_yet_send_price  || 0}}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 总计 -->
    <view class="list" v-if="state.tabId == 2">
      <scroll-view class="totalScroll" scroll-y="true">
        <view class="totalItem">
          <view class="text01">
            <text>订单总款项</text>
            <text class="span">{{statisticsInfo?.sum}}</text>
          </view>
          <view class="text01">
            <text>已收款</text>
            <text class="span">{{statisticsInfo?.yet_price}}</text>
          </view>
          <view class="text01">
            <text>订单处理成本</text>
            <text class="span">{{statisticsInfo?.cost}}</text>
          </view>
          <view class="text01">
            <text>利润</text>
            <text class="span">{{statisticsInfo?.profit}}</text>
          </view>
        </view>
      </scroll-view>
      
    </view>
    <!-- 退单 -->
    <view class="list" v-if="state.tabId == 3">
      <view class="titles">
        <view class="text text01">名称</view>
        <view class="text text02">订单状态</view>
        <view class="text text03">价格</view>
        <view class="text text04">派单价</view>
        <view class="text text05">需结款</view>
        <view class="text text06">已结款</view>
      </view>
      <scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
        <view class="item tuidanItem" v-for="(item, index) in cancelList?.list" :key="index">
          <view class="text text01">
            <view class="span">{{item?.order_no}}</view>
            <view class="span02">{{item?.name}}</view>
          </view>
          <view class="text text02" style="color:rgba(255, 11, 11, 1)">退单</view>
          <view class="text text03">{{item?.price}}</view>
          <view class="text text04">{{item?.send_price}}</view>
          <view class="text text05">{{item?.yet_send_price}}</view>
          <view class="text text06">{{item?.xu_send_price}}</view>
        </view>    
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { orderStatus } from '../data'
  import { onShow }  from '@dcloudio/uni-app'
  const emits = defineEmits(["getFinanceList", "getUnpay", "getPay","getCancellist"]);
  const props = defineProps({
    statisticsInfo: {
      type: Object,
      default: () => ({})
    },
    unPayInfo: {
      type: Array,
      default: () => ([])
    },
    payInfo: {
      type: Array,
      default: () => ([])
    },
    cancelList: {
      type: Array,
      default: () => ({})
    }
  })
  onShow(() => {
    emits('getUnpay', {page: 1})
  })
  const state = reactive({
    tabId : 1,  
  })
  
  const upper = (e) => {
  	console.log(e)
  }
  const lower = (e) => {
    console.log(e)
  }
  const scroll = (e)=> {
    console.log(e)
  }
  const changeTab2 = (item) => {
    state.tabId = item.id 
    if (item.id == 1) {
      emits('getUnpay', {page: 1})
    } else if (item.id == 2) {
      emits('getFinanceList', {page: 1})
    } else if (item.id == 3) {
      emits('getCancellist', {page: 1})
    }
  }
  const jieKuanBtn = () => {
    emits('getPay')
  }
</script>

<style lang="scss" scoped>
  .tabsBottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30rpx;
    width: 714rpx;
    .tabs2{
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
      border-bottom: 2rpx solid rgba(65, 65, 65, 1);
      padding-bottom:30rpx;
      .tabs2Item{
        width: 156rpx;
        height: 48rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 6rpx;
        border: 2rpx solid rgba(107, 107, 107, 1); 
        font-family: HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba(122, 122, 122, 1);
        margin-left: 30rpx;
        margin-right: 30rpx;
      }
      .tabs2ItemHover{
        border: 2rpx solid rgba(11, 105, 218, 1);
        background: rgba(209, 218, 243, 1);
        color: rgba(11, 105, 218, 1);
      }
    }
    .list{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20rpx;
      .titles{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        .text{
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 24rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: rgba(122, 122, 122, 1);
        }
        .text01{
          width: 180rpx;
        }
        .text02{
          width: 106rpx;
        }
        .text03{
          width: 106rpx;
        }
        .text04{
          width: 106rpx;
        }
        .text05{
          width: 106rpx;
        }
        .text06{
          width: 106rpx;
        }
      }
      .scroll-Y{
        width: 100%;
        height: calc(100vh - 490px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow: hidden;
        .item{
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
          background: #ffffff;
          border: 2rpx solid rgba(135, 255, 124, 1);
          box-sizing: border-box;
          height: 82rpx;
          margin-top: 20rpx;
          border-radius: 6rpx;
          .text{
            font-family: HarmonyOS Sans SC;
            font-weight: 400;
            font-size: 24rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgba(122, 122, 122, 1);
          }
          .text01{
            width: 180rpx;
            display: flex;
            flex-direction: column;
            .span01{
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 20rpx;
              text-align: center;
              color: rgba(60, 60, 60, 1);
            }
            .span02{
              width: 180rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 20rpx;
              text-align: center;
              color: rgba(60, 60, 60, 1);
            }
          }
          .text02{
            width: 106rpx;
          }
          .text03{
            width: 106rpx;
          }
          .text04{
            width: 106rpx;
          }
          .text05{
            width: 106rpx;
          }
          .text06{
            width: 106rpx;
          }
        }
        .itemBlue{
          border: 2rpx solid rgba(0, 77, 255, 1);
        }
        .itemYellow{
          border: 2rpx solid rgba(250, 177, 76, 1);
        }
        .tuidanItem{
          border: 2rpx solid rgba(255, 11, 11, 1)
        }
      }
      .priceMain{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 94rpx;
        .btn{
          width: 184rpx;
          height: 84rpx;
          border-radius: 10rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 40rpx;
          color: rgba(83, 83, 83, 1);
          background: rgba(151, 151, 151, 0.4);
          margin-right: 30rpx;
        }
        .btnHover{
          background: rgba(135, 255, 124, 1);
        }
        .prices{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          min-width: 212rpx;
          height: 92rpx;
          border-radius: 10rpx;
          background: #ffffff;
          .priceItem{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 20rpx;
            text{
              color: rgba(122, 122, 122, 1);
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 24rpx;
            }
            .text{
              color: rgba(71, 71, 71, 1);
            }
            
          }
        }
      }
      // 总计
      .totalScroll{
        height: calc(100vh - 500px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        .totalItem{
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          padding-left: 20rpx;
          padding-right: 20rpx;
          width: 614rpx;
          height: 142rpx;
          border-radius: 14rpx;
          background: #ffffff;
          .text01{
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text{
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 16rpx;
              text-align: center;
              color: rgba(35, 35, 35, 0.52);
            }
            .span{
              font-family: PingFang SC;
              font-weight: 600;
              font-size: 32rpx;
              text-align: center;
              color: rgba(62, 62, 62, 1);
              margin-top:10rpx;
            }
          }
        }
      }
    }
  }
</style>